<template>
  <a-form :form="form" @submit="handleSubmit" class="register-form">
    <a-form-item v-bind="formItemLayout" label="用户名">
      <a-input
        v-decorator="[
          'username',
          {
            rules: [
              {
                required: true,
                message: '请输入您的用户名!',
                whitespace: true,
              },
            ],
          },
        ]"
      />
    </a-form-item>
    <a-form-item v-bind="formItemLayout" label="密码" has-feedback>
      <a-input
        v-decorator="[
          'password',
          {
            rules: [
              {
                required: true,
                message: '输入您的密码!',
              },
              {
                validator: validateToNextPassword,
              },
            ],
          },
        ]"
        type="password"
      />
    </a-form-item>
    <a-form-item v-bind="formItemLayout" label="确认密码" has-feedback>
      <a-input
        v-decorator="[
          'confirm',
          {
            rules: [
              {
                required: true,
                message: '请确认您的密码!',
              },
              {
                validator: compareToFirstPassword,
              },
            ],
          },
        ]"
        type="password"
        @blur="handleConfirmBlur"
      />
    </a-form-item>
    <a-form-item v-bind="formItemLayout" label="注册地">
      <a-cascader
        v-decorator="[
          'address',
          {
            initialValue: ['福建', '福州', '长乐', '福州软件职业技术学院'],
            rules: [
              {
                type: 'array',
                required: true,
                message: '请选择注册地点!',
              },
            ],
          },
        ]"
        :options="residences"
      />
    </a-form-item>
    <a-form-item v-bind="formItemLayout" label="邮箱">
      <a-input
        v-decorator="[
          'email',
          {
            rules: [
              {
                type: 'email',
                message: '无效邮箱!',
              },
              {
                required: true,
                message: '请输入邮箱!',
              },
            ],
          },
        ]"
      />
    </a-form-item>
    <a-form-item v-bind="tailFormItemLayout">
      <a-checkbox
        v-decorator="[
          'agreement',
          {
            valuePropName: 'checked',
            rules: [{ required: true, message: '请先同意该协议内容' }],
          },
        ]"
      >
        我已阅读并同意该
        <a href="#"> 协议内容 </a>
      </a-checkbox>
    </a-form-item>
    <a-form-item v-bind="tailFormItemLayout">
      <a-button type="primary" html-type="submit"> 注册 </a-button> 或
      <router-link to="login">去登录! </router-link>
    </a-form-item>
  </a-form>
</template>

<script>
const residences = [
  {
    value: "福建",
    label: "福建",
    children: [
      {
        value: "福州",
        label: "福州",
        children: [
          {
            value: "长乐",
            label: "长乐",
            children: [
              {
                value: "福州软件职业技术学院",
                label: "福州软件职业技术学院",
              },
            ],
          },
        ],
      },
      {
        value: "泉州",
        label: "泉州",
        children: [
          {
            value: "安溪",
            label: "安溪",
          },
        ],
      },
    ],
  },
  {
    value: "浙江",
    label: "浙江",
    children: [
      {
        value: "杭州",
        label: "杭州",
        children: [
          {
            value: "西湖",
            label: "西湖",
          },
        ],
      },
    ],
  },
  {
    value: "江苏",
    label: "江苏",
    children: [
      {
        value: "南京",
        label: "南京",
        children: [
          {
            value: "中华门",
            label: "中华门",
          },
        ],
      },
    ],
  },
];

export default {
  data() {
    return {
      confirmDirty: false,
      residences,
      autoCompleteResult: [],
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
          lg: { span: 6 },
        },
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: 16,
            offset: 8,
          },
        },
      },
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "register" });
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll(
        (err, { username, password, address, email }) => {
          if (!err) {
            this.$message.loading({ content: "Loading...", key: "register" });
            this.$axios
              .post("/api/user/register.php", {
                username,
                password,
                address,
                email,
              })
              .then((res) => {
                if (res.data.code === 1) {
                  this.$message.success({
                    content: "注册成功!",
                    key: "register",
                  });

                  this.$message.success("注册成功!");
                  this.$router.push("/client/login");
                } else {
                  this.$message.error({
                    content: res.data.msg,
                    key: "register",
                  });
                }
              });
          }
        }
      );
    },
    handleConfirmBlur(e) {
      const value = e.target.value;
      this.confirmDirty = this.confirmDirty || !!value;
    },
    compareToFirstPassword(_, value, callback) {
      const form = this.form;
      if (value && value !== form.getFieldValue("password")) {
        callback("两次输入的密码不一致!");
      } else {
        callback();
      }
    },
    validateToNextPassword(rule, value, callback) {
      const form = this.form;
      if (value && this.confirmDirty) {
        form.validateFields(["confirm"], { force: true });
      }
      callback();
    },
  },
};
</script>

<style scoped>
.register-form {
  margin: 0 auto;
}
</style>
